<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <input type="text" placeholder="商品名">
    <input type="number" placeholder="商品价格">
    <input type="number" placeholder="购买数量">
    <button class="btn">增加</button>
    <table style="max-width:600px;margin: 50px auto;" class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
     <tbody>
       <tr>
        <td colspan="5" v-if="!items.length" class="text-center">
          暂无商品
        </td>
       </tr>
      <tr v-for="(item,index) in items" :key="item.id">
        <td>
          <input
            @change="singleCheck"
            type="checkbox" :value="item.id" v-model="checkArr">
          {{ item.name }}
        </td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="addNum(index)" class="btn btn-xs">+</button>
          <span>{{item.num}}</span>
          <button @click="reduceNum(index)" class="btn btn-xs">-</button>
        </td>
        <td>{{ (item.num*item.price).toFixed(2) }}</td>
        <td>
          <button @click="delItem(index)" class="btn btn-danger btn-xs">删除</button>
        </td>
      </tr>
     </tbody>
      <tfoot>
        <tr>
          <td colspan="5">
            全选：
            <input
              @click="allChecked"
              :checked="items.length === checkArr.length" type="checkbox">
            总价格：{{ total }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data: {
        items: [ // 所有商品
          {
            id:1,
            name:"商品1",
            price: 15.5,
            num: 2
          },
          {
            id:2,
            name:"商品2",
            price: 18.5,
            num: 1
          },
          {
            id:3,
            name:"商品3",
            price: 20.5,
            num: 1
          },
          {
            id:4,
            name:"商品4",
            price: 19.9,
            num: 1
          }
        ],
        total:0, //总价格
        checkArr: [1,3,4] // 所有选中商品 id
      },
      methods: {
        singleCheck(){
          // 点击改变商品选中状态
          this.calcTotal();
        },
        delItem(index){
          if(confirm('您确认删除吗?')){
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        addNum(index){
          // 增加购买数量
          this.items[index].num++;
          this.calcTotal();
        },
        reduceNum(index){
          this.items[index].num--;
          if(this.items[index].num <= 1){
            this.items[index].num = 1;
          }
          this.calcTotal();
        },
        calcTotal(){
          // 计算总价格
          /* 
          所有选中商品的 价格*数量的总和
          */
          let checkedItems = [];
          this.items.forEach(item=>{
            //console.log(item.id)
           
            if(this.checkArr.includes(item.id)){
              checkedItems.push(item);
            }
          })
          this.total = 0;
          checkedItems.forEach(item=>{
            this.total += item.num*item.price
          })
          this.total = parseFloat(this.total.toFixed(2));
        },
        allChecked(e){
          console.log(e.target.checked)
          let allItemsIdS =[]; //所有商品id数组

          this.items.forEach(item=>{
            allItemsIdS.push(item.id);
          })
          if(e.target.checked){
            this.checkArr = allItemsIdS;
          }else{
            this.checkArr = [];
          }
          this.calcTotal();
        }
      },
      mounted() {
       this.calcTotal();
      }
    })
  </script>
</body>
</html>